<template>
  <div class="app-container" style="padding-top: 0px">
    <div>
<!--      <div class="logout">-->
<!--        <el-button class="button" type="primary" @click="onLogout">退出</el-button>-->
<!--      </div>-->
      <div class="box">
        <el-tabs v-model="currentView" type="card" @tab-click="handleClick" style="padding-top: 0px">
          <el-tab-pane label="我的博客" name="Article" />
          <el-tab-pane label="登录人员信息" name="User" />
          <el-tab-pane label="注册用户" name="MyInfo"/>
          <el-tab-pane label="您的支持" name="Support"/>
          <el-tab-pane label="图片" name="Interesting"/>
        </el-tabs>
        <div :is="currentView" keep-alive />
      </div>
    </div>

  </div>
</template>
<script>
import { logout } from "@/api/user";
import { EventBus} from "@/pages/components/eventBus";

export default {
  name:'Home',
  components: {
    // 以下方式引入路由是路由的懒加载，有利于页面优化
    Article: resolve => {
      require(['../components/Article.vue'], resolve)
    },
    User: resolve => {
      require(['../components/User.vue'], resolve)
    },
    MyInfo: resolve => {
      require(['../components/MyInfo.vue'], resolve)
    },
    Support: resolve => {
      require(['../components/Support.vue'], resolve)
    },
    Interesting: resolve => {
      require(['../components/Interesting.vue'], resolve)
    }
  },
  data() {
    return {
      currentView: 'Article',
      form: {
        username: '',
        password: '',
        id: ''
      }
    }
  },
  methods: {
    handleClick() {
      // console.log(tab, event)
    },
    //  退出方法
    onLogout() {
      EventBus.$on('aMsg', (msg) => {
        // Subscribe.vue发送来的消息
        this.form = msg
      })
      logout(this.form).then(() => {
        alert("退出成功")
        this.$router.replace('/Login').catch(err=>err);
      })

    }
  }
}
</script>

<style scoped>
.logout {
  display: flex;
  position: relative;
  margin-left:auto;
}
.box {
  position: relative;
  /*top: -40px;*/
}
.button {
  margin-left:auto;
}
</style>
